<template>
  <van-popup :show="show" @update:show="updateShow" position="bottom" :style="{ height: '70%' }" round>
    <div class="h-full flex flex-col">
      <div class="flex-shrink-0 flex items-center justify-between p-4">
        <van-icon name="arrow-down" @click="updateShow(false)" />
        <h2 class="text-lg">编辑个人资料</h2>
        <button class="text-pink-500" @click="onSave">保存</button>
      </div>
      <div class="flex-1 overflow-y-auto py-10">
        <div class="flex flex-col items-center mb-10">
          <van-uploader :after-read="onAvatarUpload" class="rounded-full overflow-hidden w-24 h-24">
            <img :src="editableUser.avatar || defaultAvatar" class="w-24 h-24 object-cover" alt="avatar" />
          </van-uploader>
        </div>
        <van-cell-group inset>
          <van-field class="py-4" v-model="editableUser.nickname" label="昵称" placeholder="请输入昵称" />
          <van-field
            class="py-4"
            v-model="genderText"
            is-link
            readonly
            label="性别"
            placeholder="请选择性别"
            @click="showGenderPicker = true"
          />
          <van-field
            class="py-4"
            v-model="editableUser.birthday"
            is-link
            readonly
            label="生日"
            placeholder="请选择生日"
            @click="showBirthdayPicker = true"
          />
          <van-field
            class="py-4"
            v-model="editableUser.signature"
            rows="2"
            autosize
            label="签名"
            type="textarea"
            maxlength="50"
            placeholder="介绍一下自己吧"
            show-word-limit
          />
        </van-cell-group>
      </div>

      <!-- 性别选择器 -->
      <van-popup v-model:show="showGenderPicker" position="bottom" round>
        <van-picker :columns="genderColumns" @confirm="onGenderConfirm" @cancel="showGenderPicker = false" />
      </van-popup>

      <!-- 生日选择器 -->
      <van-popup v-model:show="showBirthdayPicker" position="bottom" round>
        <van-date-picker
          v-model="currentDate"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onBirthdayConfirm"
          @cancel="showBirthdayPicker = false"
        />
      </van-popup>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import {
  Popup as VanPopup,
  Icon as VanIcon,
  Uploader as VanUploader,
  CellGroup as VanCellGroup,
  Field as VanField,
  Picker as VanPicker,
  DatePicker as VanDatePicker,
  showToast
} from 'vant'
import defaultAvatar from '@/assets/images/default.png'

const props = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  user: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:show', 'save'])

const editableUser = ref({})

watch(
  () => props.user,
  (newUser) => {
    editableUser.value = { ...newUser }
    if (newUser.birthday) {
      currentDate.value = newUser.birthday.split('-')
    }
  },
  { immediate: true, deep: true }
)

const updateShow = (value) => {
  emit('update:show', value)
}

const onSave = () => {
  emit('save', editableUser.value)
  updateShow(false)
}

// Avatar upload
const onAvatarUpload = (file) => {
  // Here you would typically upload the file to a server
  // For now, we'll just display it using a data URL
  editableUser.value.avatar = file.content
  showToast('头像已更新')
}

// Gender picker
const showGenderPicker = ref(false)
const genderColumns = [
  { text: '男', value: 'male' },
  { text: '女', value: 'female' },
  { text: '保密', value: 'unknown' }
]
const genderText = computed(() => {
  const gender = genderColumns.find((g) => g.value === editableUser.value.gender)
  return gender ? gender.text : ''
})
const onGenderConfirm = ({ selectedOptions }) => {
  editableUser.value.gender = selectedOptions[0]?.value
  showGenderPicker.value = false
}

// Birthday picker
const showBirthdayPicker = ref(false)
const minDate = new Date(1950, 0, 1)
const maxDate = new Date()
const currentDate = ref(['2000', '01', '01'])

const onBirthdayConfirm = ({ selectedValues }) => {
  editableUser.value.birthday = selectedValues.join('-')
  showBirthdayPicker.value = false
}
</script>

<style scoped>
/* You can add component-specific styles here if needed */
</style>
